import React from "react";
import "./App.css";
// 函数组件

// 类组件
class App extends React.Component {
  // 存储数据的容器
  state = {
    header: {
      left: {
        title: "饿了吗",
        tip: "饿不饿都饿了嘛？",
      },
      right: {
        register: "注册",
        login: "登陆",
        action: "我要开店",
      },
    },

    message: "你好 React",
    myClassName: "active",

    list: ["a", "b", "c", "d", "e"],
  };

  // 渲染
  render() {
    const { header } = this.state;
    return (
      <div>
        <div className="header">
          <div className="top">
            <div className="left">
              <h1>{header.left.title}</h1>
              <div>{header.left.tip}</div>
            </div>
            <div className="right">
              <span>{header.right.register}</span>
              <span>|</span>
              <span>{header.right.login}</span>
              <span>{header.right.action}</span>
            </div>
          </div>
        </div>

        {/* 文本使用 */}
        <div>{this.state.message}</div>
        {/* 绑定属性 */}
        <div className={this.state.myClassName}>123</div>

        {/* 条件渲染  v-if  v-show  */}
        {false ? <div>哈哈哈</div> : ""}
        {true && <div>呵呵呵</div>}

        {/* 循环 */}
        <ul>
          {this.state.list.map((v, i) => {
            return <li key={i}>{v}</li>;
          })}
        </ul>
      </div>
    );
  }
}

export default App;
